<template>
  <div>
    验证码登录
    <div class="userName">
      <svg
        class="icon"
        width="25"
        height="25"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        data-v-365b8594=""
      >
        <path
          fill="currentColor"
          d="M628.736 528.896A416 416 0 01928 928H96a415.872 415.872 0 01299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 11-416 0 208 208 0 01416 0z"
        ></path>
      </svg>
      <el-input
        v-model="phoneNumber"
        debounce
        placeholder="请输入内容"
        @input="setPhoneNumber"
        ></el-input>
    </div>
    <div class="passWord">
      <svg
        class="icon"
        width="25"
        height="25"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        data-v-365b8594=""
      >
        <path
          fill="currentColor"
          d="M224 448a32 32 0 00-32 32v384a32 32 0 0032 32h576a32 32 0 0032-32V480a32 32 0 00-32-32H224zm0-64h576a96 96 0 0196 96v384a96 96 0 01-96 96H224a96 96 0 01-96-96V480a96 96 0 0196-96z"
        ></path>
        <path
          fill="currentColor"
          d="M512 544a32 32 0 0132 32v192a32 32 0 11-64 0V576a32 32 0 0132-32zM704 384v-64a192 192 0 10-384 0v64h384zM512 64a256 256 0 01256 256v128H256V320A256 256 0 01512 64z"
        ></path>
      </svg>
      <el-input  
        v-model="captcha"
        placeholder="请输入内容"
      ></el-input>
      <span @click="getCaptcha">获取验证码</span>
    </div>
    <el-row>
      <el-button
        color="#626aef"
        style="color: white"
        size="medium"
        @click="handleLogin"
        round
      >
        登 录
      </el-button>
    </el-row>
  </div>
</template>

<script>
import { getCaptcha, sendCaptcha, verifyCaptcha } from '../../../netWork/easeRequest/easeLoginServer'

export default {
  name: "LoginWithCaptcha",

  data() {
    return {
      phoneNumber: '',
      captcha: ''
    }
  },

  mounted() {},

  methods: {
    setPhoneNumber(e) {
      this.phoneNumber = e
    },
    // 获取验证码
    getCaptcha() {
      let that = this
      getCaptcha(that.phoneNumber)
      .then(res => {
        console.log('获取验证码', res)
        if (res.data.data && res.data.code =='200') {
          that.$message({
            type: 'success',
            message: '验证码发送成功'
          })
        }else {
          that.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
      
    },
    // 登录
    handleLogin() {
      let that = this
      // 验证验证码
      verifyCaptcha(that.phoneNumber, that.captcha)
      .then(res => {
        // console.log(res)
        // 验证验证码
        sendCaptcha(that.phoneNumber, that.captcha)
        .then(res => {
          console.log(res)
          if(res.data.code == '200') {
            that.$message({
            type: 'success',
            message: '登录成功'
          })
          }
        })
      })
    }
  },
};
</script>

<style lang="less" scoped>

.userName {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dddfe6;
  border-radius: 7px;
}
.passWord {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dddfe6;
  border-radius: 7px;
  margin: 10px 0;
}
</style>